<template>
  <view class="maxRadio">
    <uv-radio-group
      v-bind="attrs"
      v-model="chooseVal"
      :activeColor="props.activeColor"
      :style="{
        '--itemWidth': 98 / Number(props.col) + '%',
        '--itemBackGround': props.backgroud,
        '--itemColor': props.color,
        '--itemFontSize': props.fontSize,
        '--itemRadius': raidoRadius,
      }"
    >
      <view class="radioView">
        <uv-radio
          :customStyle="{ margin: '8px' }"
          v-for="(item, index) in props.store"
          :key="index"
          :label="item[props.rowKey]"
          :name="item[props.rowValue]"
        >
          <template v-slot:icon>
            {{ item[props.rowKey] }}
          </template>
          <template v-slot:default>
            <!-- <view>{{item.name}}</view> -->
            <view>&nbsp;</view>
          </template>
        </uv-radio>
      </view>
    </uv-radio-group>
  </view>
</template>

<script setup>
import { ref, computed, useAttrs, onMounted } from "vue";
const attrs = useAttrs();
const localStore = ref([]);
// uv-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  /**每行多少个 */
  col: {
    type: [Number, String],
    default: 2,
  },
  store: {
    type: Array,
    default: [],
  },
  rowKey: {
    type: String,
    default: "label",
  },
  /**自定义展示数据的key */
  rowValue: {
    type: String,
    default: "value",
  },
  /**激活的背景颜色 */
  activeColor: {
    type: String,
    default: "blue",
  },
  /**文字的颜色 */
  color: {
    type: String,
    default: "#000",
  },
  /**文字的大小 */
  fontSize: {
    type: String,
    default: "14px",
  },
  radius: {
    type: String,
    default: 0,
  },
});
/**计算单选框的圆角 */
const raidoRadius = computed(() => {
  return props.radius ? props.radius + "rpx" : "0rpx";
});
const emits = defineEmits();
const chooseVal = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    console.log(val, "val");

    emits("update:modelValue", val);
  },
});

// 自动运行
onMounted(() => {
  if(props.store instanceof Function) {
    props.store().then(res => {
      localStore.value = res
    }).catch(err=> {
      localStore.value = []
    })
  } else {
    localStore.value = props.store
  }
});
</script>

<style scoped lang="scss">
.maxRadio {
  width: 100%;
}
.radioView {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  // justify-content: space-between;
  .item {
    width: 30%;
  }
}
.radioView ::v-deep .uv-radio {
  width: var(--itemWidth);
  overflow: hidden;
  margin: 0 !important;
  margin-bottom: 8rpx !important;
  /**间隔距离 */
  margin-right: 0.5% !important;
  // display: none;
}
/**图标干掉 */
.radioView ::v-deep .uv-radio__icon-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100% !important;
  font-size: var(--itemFontSize);
  border: none;
  padding: 30rpx 20rpx;

  text-align: left;
  word-break: break-all; /* 强制换行 */
  height: 100rpx !important;
  // display: none;
  border: #dcdcdc 2rpx solid;
  color: var(--itemColor);
  border-radius: var(--itemRadius);
}
</style>
